<template> <div class="page-container">
  <div class="toolbar">
     <el-row>
      <el-tabs type="border-card">
       <el-tab-pane label="基本信息">
       <el-form :inline="true" :model="dataForm" label-width="110px" style="text-align:center;" ref="dataForm" :rules="dataFormRules" :disabled="this.$route.query.disabled" class="form">
       <el-row style="margin-top: -20px;">
       <el-divider content-position="center">
        <span style="font-size:16px;font-weight:800">基本信息</span>
       </el-divider>

       <el-form-item label="会员ID" v-show="false" prop="id" >
        <el-input v-model="dataForm.id" placeholder="请输入" ></el-input>
       </el-form-item>
       <el-form-item label="部门id"  prop="deptId" >
        <el-input v-model="dataForm.deptId" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="真实姓名"  prop="name" >
        <el-input v-model="dataForm.name" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="用户身份证号"  prop="idCard" >
        <el-input v-model="dataForm.idCard" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="第三方用户id"  prop="thirdUserId" >
        <el-input v-model="dataForm.thirdUserId" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="1:男 2:女"  prop="sex" >
        <el-input v-model="dataForm.sex" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="生日"  prop="birth" >
        <el-input v-model="dataForm.birth" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="地区"  prop="address" >
        <el-input v-model="dataForm.address" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="年龄"  prop="age" >
        <el-input v-model="dataForm.age" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="头像"  prop="headImage" >
        <el-input v-model="dataForm.headImage" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="微信号"  prop="wxAccount" >
        <el-input v-model="dataForm.wxAccount" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="微信名称"  prop="wxName" >
        <el-input v-model="dataForm.wxName" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="微信头像"  prop="wxImage" >
        <el-input v-model="dataForm.wxImage" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="是否实名认证 1：已经认证 2：为认证"  prop="isAuthentication" >
        <el-input v-model="dataForm.isAuthentication" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="用户账号"  prop="userAccount" >
        <el-input v-model="dataForm.userAccount" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="序号"  prop="userNumber" >
        <el-input v-model="dataForm.userNumber" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="用户来源渠道"  prop="userSource" >
        <el-input v-model="dataForm.userSource" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="用户昵称"  prop="nickName" >
        <el-input v-model="dataForm.nickName" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="用户手机号"  prop="phone" >
        <el-input v-model="dataForm.phone" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="会员等级id"  prop="memberGradeId" >
        <el-input v-model="dataForm.memberGradeId" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="会员类型 1普通会员 2 VIP会员"  prop="memberType" >
        <el-input v-model="dataForm.memberType" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="VIP 会员有效期 "  prop="memberValidityTime" >
        <el-input v-model="dataForm.memberValidityTime" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="状态所属平台"  prop="ascriptionStatus" >
        <el-input v-model="dataForm.ascriptionStatus" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="会员积分"  prop="integral" >
        <el-input v-model="dataForm.integral" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="创建日期"  prop="createTime" >
        <el-input v-model="dataForm.createTime" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="创建者id"  prop="creatorId" >
        <el-input v-model="dataForm.creatorId" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="创建者姓名"  prop="creatorName" >
        <el-input v-model="dataForm.creatorName" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="注册时间"  prop="registrationTime" >
        <el-input v-model="dataForm.registrationTime" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="最后登录时间时间"  prop="lastLogTime" >
        <el-input v-model="dataForm.lastLogTime" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="更新时间 数据库"  prop="updateTime" >
        <el-input v-model="dataForm.updateTime" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="更新用户姓名"  prop="updateName" >
        <el-input v-model="dataForm.updateName" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="是否黑名单 1 否 0 是"  prop="isBlacklist" >
        <el-input v-model="dataForm.isBlacklist" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="1:删除0：未删除"  prop="deleteFlag" >
        <el-input v-model="dataForm.deleteFlag" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="状态1正常 0冻结"  prop="status" >
        <el-input v-model="dataForm.status" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="微信唯一标识"  prop="unionid" >
        <el-input v-model="dataForm.unionid" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="邮箱"  prop="email" >
        <el-input v-model="dataForm.email" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="设备号"  prop="deviceNo" >
        <el-input v-model="dataForm.deviceNo" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="上级分销代理ID"  prop="allocationPid" >
        <el-input v-model="dataForm.allocationPid" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="分销员类型 0普通会员 1分销员 2 分销代理"  prop="allocationStatus" >
        <el-input v-model="dataForm.allocationStatus" placeholder="请输入"></el-input>
       </el-form-item>
       <el-form-item label="1店铺会员  2用户会员"  prop="storeMember" >
        <el-input v-model="dataForm.storeMember" placeholder="请输入"></el-input>
       </el-form-item>
       </el-row>
      </el-form>
      <div class="tool-wrap">
       <div class="left-area">
        <el-button-group>
         <el-button type="primary" size="small" @click="submitForm()" v-show="!this.$route.query.disabled">保存</el-button>
         <el-button type="primary" size="small" @click="$router.go(-1)">取消</el-button>
        </el-button-group>
       </div>
      </div>
     </el-tab-pane>
    </el-tabs>
   </el-row>
  </div>
 </div>
</template>
<script>
//一.导包区
import jicTable from '@/components/jicComponentGallery/jicTable'; 
import {mapState} from "vuex"; 
import ThemePicker from "@/components/ThemePicker"; 
import LangSelector from "@/components/LangSelector"; 
import VDistpicker from 'v-distpicker'; 
import elTree from '@/views/tree/src/tree.vue' 

//二.数据输出区
export default {

//2.1 注册组件
components: {
 jicTable,
 ThemePicker,
 LangSelector,
 VDistpicker,
 elTree,
},

//2.2 数据初始化区
data() {
 return {

  //2.2.1 公共数据初始化
  searchSize: 'mini',

// 2.2.2 form 表单数据初始化 
  dataForm: {
    id:null,
   deptId:null, 
   name:null, 
   idCard:null, 
   thirdUserId:null, 
   sex:null, 
   birth:null, 
   address:null, 
   age:null, 
   headImage:null, 
   wxAccount:null, 
   wxName:null, 
   wxImage:null, 
   isAuthentication:null, 
   userAccount:null, 
   userNumber:null, 
   userSource:null, 
   nickName:null, 
   phone:null, 
   memberGradeId:null, 
   memberType:null, 
   memberValidityTime:null, 
   ascriptionStatus:null, 
   integral:null, 
   createTime:null, 
   creatorId:null, 
   creatorName:null, 
   registrationTime:null, 
   lastLogTime:null, 
   updateTime:null, 
   updateName:null, 
   isBlacklist:null, 
   deleteFlag:null, 
   status:null, 
   unionid:null, 
   email:null, 
   deviceNo:null, 
   allocationPid:null, 
   allocationStatus:null, 
   storeMember:null, 
},
//trigger 为blur 表示丢失焦点;为change 表示值发生变化;
  dataFormRules: {
   id:[ 
   { required: true, message: "请输入会员ID", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   deptId:[ 
   { required: true, message: "请输入部门id", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   name:[ 
   { required: true, message: "请输入真实姓名", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   idCard:[ 
   { required: true, message: "请输入用户身份证号", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   thirdUserId:[ 
   { required: true, message: "请输入第三方用户id", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   sex:[ 
   { required: true, message: "请输入1:男 2:女", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   birth:[ 
   { required: true, message: "请输入生日", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   address:[ 
   { required: true, message: "请输入地区", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   age:[ 
   { required: true, message: "请输入年龄", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   headImage:[ 
   { required: true, message: "请输入头像", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   wxAccount:[ 
   { required: true, message: "请输入微信号", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   wxName:[ 
   { required: true, message: "请输入微信名称", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   wxImage:[ 
   { required: true, message: "请输入微信头像", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   isAuthentication:[ 
   { required: true, message: "请输入是否实名认证 1：已经认证 2：为认证", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   userAccount:[ 
   { required: true, message: "请输入用户账号", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   userNumber:[ 
   { required: true, message: "请输入序号", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   userSource:[ 
   { required: true, message: "请输入用户来源渠道", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   nickName:[ 
   { required: true, message: "请输入用户昵称", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   phone:[ 
   { required: true, message: "请输入用户手机号", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   memberGradeId:[ 
   { required: true, message: "请输入会员等级id", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   memberType:[ 
   { required: true, message: "请输入会员类型 1普通会员 2 VIP会员", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   memberValidityTime:[ 
   { required: true, message: "请输入VIP 会员有效期 ", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   ascriptionStatus:[ 
   { required: true, message: "请输入状态所属平台", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   integral:[ 
   { required: true, message: "请输入会员积分", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   createTime:[ 
   { required: true, message: "请输入创建日期", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   creatorId:[ 
   { required: true, message: "请输入创建者id", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   creatorName:[ 
   { required: true, message: "请输入创建者姓名", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   registrationTime:[ 
   { required: true, message: "请输入注册时间", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   lastLogTime:[ 
   { required: true, message: "请输入最后登录时间时间", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   updateTime:[ 
   { required: true, message: "请输入更新时间 数据库", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   updateName:[ 
   { required: true, message: "请输入更新用户姓名", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   isBlacklist:[ 
   { required: true, message: "请输入是否黑名单 1 否 0 是", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   deleteFlag:[ 
   { required: true, message: "请输入1:删除0：未删除", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   status:[ 
   { required: true, message: "请输入状态1正常 0冻结", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   unionid:[ 
   { required: true, message: "请输入微信唯一标识", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   email:[ 
   { required: true, message: "请输入邮箱", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   deviceNo:[ 
   { required: true, message: "请输入设备号", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   allocationPid:[ 
   { required: true, message: "请输入上级分销代理ID", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   allocationStatus:[ 
   { required: true, message: "请输入分销员类型 0普通会员 1分销员 2 分销代理", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
   storeMember:[ 
   { required: true, message: "请输入1店铺会员  2用户会员", trigger: "blur" }, 
   { min: 3, max: 5, message: "长度在 0 到 20 个字符", trigger: "blur" }, 
   ], 
},
   //dialogVisible: false, //// 是否显示弹窗内容;
   //editDialogVisible1: false,//// 是否可编辑弹窗内容;
   //editLoading: false,////是否显示加载时动画效果;





   }//return 完结;
  },//data()方法 完结;

//2.3 Vue 方法区
methods: {
//2.3.1 公共方法区

//2.请求列表数据
getDetail() {
 let this_ = this;
 if (this.$route.query != null && this.$route.query.id != null && this.$route.query.id != '' && this.$route.query.id != 'null' && this.$route.query.id != "undefined") {
  let params = {};
  params.id = this.$route.query.id;
  this.utils.request.getPublMemberDetail(params, function (res) {
  if (res.code === "0000") {
   this_.dataForm = res.data;
  } else {
   this_.$message({message: "操作失败, " + data.msg, type: "error"});
   }
  });
 }
},

submitForm: function() {
  let this_ = this;
  this_.$refs.dataForm.validate(valid => {
  if (valid) {
   this_.$confirm("确认提交吗？", "提示", {}).then(() => {
     this_.editLoading = true;
     let params = this.dataForm;
     this_.utils.request.savePublMember(params, function (res) {
     if (res.code === "0000") {
        this_.$message({message: "操作成功", type: "success"});
     } else {
         this_.$message({message: "操作失败", type: "error"});
     }
     });
     this_.$router.go(-1);
  });
  }
  });
},
// 7.页面弹窗处理方法
add() {
this.dialogVisible = true;
},

// 8.关闭弹窗
handleClose() {
this.dialogVisible = false;
},

/*图片预览*/
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
/*图片移除*/
handleRemove(file, fileList) {
console.log(file, fileList);
},
back(){
    this.$router.go(-1);
},
//==========2.3.1 JavaScript 自定义方法区==========





},
//1.初始化页面调用方法(dom元素绑定后再执行初始化数据操作)
mounted() {
 this.getDetail();
},

}
</script>
<style lang="scss" scoped>
  /* ele组件样式重置 */
  .common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
      .el-form-item__label {
        height: 32px;
        line-height: 32px;
      }

      .el-form-item__content {
        height: 32px;
        line-height: 32px;
        width: 150px;
      }

      .el-input--mini .el-input__inner {
        height: 32px;
        line-height: 32px;
      }

      .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 150px;
      }
    }

    /* 多日期样式重置 */
    .el-dater /deep/ .el-form-item__content {
      width: 330px;
    }

    /* 通用工具部分样式 */
    .tool-wrap {
      width: 100%;
      height: auto;
      position: relative;
      overflow: hidden;

      .left-area {
        float: left;
        width: 50%;
        text-align: left;

        button {
          margin-right: 15px;
          border-radius: 5px;
        }
      }

      .right-area {
        float: right;
        width: 50%;
        text-align: right;
      }
    }

    /* 表格部分样式 */
    .table-wrap {
      width: 100%;
      max-height: 600px;
      margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
      text-align: center !important;
    }
  }
</style>
